import { ReactNode } from 'react'

export const OnlineDom: React.CSSProperties = {
  height: '100%',
  width: '200px',
  padding: '0',
  boxSizing: 'border-box'
}

export const MyStatusDom: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  marginBottom: '36px',
  paddingBottom: '10px',
  borderBottom: '1px solid rgb(61,65,66)'
}

export const MyInfoDom: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  marginBottom: '8px',
  marginLeft: '20px',
  color: 'rgb(225,230,210)',
  fontWeight: 'bold',
  fontSize: '14px'
}

export const TreeDom: React.CSSProperties = {
  backgroundColor: 'rgb(1,10,19)',
  color: 'rgb(160,155,140)'
}

export const CodeStyle: React.CSSProperties = {
  fontSize: '12px',
  fontWeight: '300'
}

export const MyFriendsListDom: React.CSSProperties = {}

export interface Props {
  initData: any
  friends: Array<any>
}

export interface User {
  availability: string
  displayGroupId: number
  displayGroupName: string
  gameName: string
  gameTag: string
  groupId: number
  groupName: string
  icon: number
  id: string
  isP2PConversationMuted: boolean
  lastSeenOnlineTimestamp: number | null
  lol: any
  name: string
  note: string
  patchline: string
  pid: string
  platformId: string
  product: string
  productName: string
  puuid: string
  statusMessage: string
  summary: string
  summonerId: number
  time: number
}

export interface TreeNode {
  title: string
  key: string
  icon?: ReactNode
  puuid?: string
  summonerId?: number
  availability?: string
  children?: TreeNode[]
}
